

<template>
    <div id="main">
        <div class="statistics">
            <el-tabs v-model="pageTabs[0]" @tab-click="handleClick">
                <el-tab-pane
                    v-for="item in pageTabs"
                    :key="item"
                    :label="item"
                    :name="item"
                >
                    <el-row>
                        <el-col :span="8">
                            <div>
                                <el-button
                                    type="text"
                                    class="setting-btn"
                                    icon="el-icon-back"
                                    @click="jumpto('/home')"
                                >
                                    返回
                                </el-button>
                                <span> 客单价指标分析 </span>
                            </div>
                        </el-col>
                        <el-col :span="16">
                            <el-radio-group
                                v-model="dateType"
                                @change="changeDateType"
                            >
                                <el-radio-button label="date"
                                    >日</el-radio-button
                                >
                                <el-radio-button label="week"
                                    >周</el-radio-button
                                >
                                <el-radio-button label="month"
                                    >月</el-radio-button
                                >
                                <el-radio-button label="year"
                                    >年</el-radio-button
                                >
                            </el-radio-group>
                            <ksdate
                                ref="ksdate"
                                :vuexModelName="vuexModelName"
                                :id="'startRange'"
                                :date="startdate"
                                :type="dateType"
                                @changeDateType="changeDateType"
                            ></ksdate>
                            <el-button
                                type="text"
                                class="setting-btn"
                                icon="el-icon-plus"
                                @click="changeCompare"
                            >
                                添加对比
                            </el-button>
                            <ksdate
                                v-show="showCompareDate"
                                ref="ksdate"
                                :vuexModelName="vuexModelName"
                                :id="'endRange'"
                                :date="enddate"
                                :type="dateType"
                            ></ksdate>
                        </el-col>
                    </el-row>
                    <analyzepane
                        :dataReportInfoYear="dataReportInfoYear"
                    ></analyzepane>
                    <chart
                        :vuexModelName="vuexModelName"
                        :id="'chart2'"
                        :ref="chart2"
                        :staticticsData="staticticsData"
                        :options="{
                            title: '付款金额 ￥12,133,412,412 趋势',
                            dscription: '',
                            rightTopChangeType: ture,
                        }"
                        @searchChart="searchChart"
                    >
                    </chart>
                </el-tab-pane>
                <analyzetable
                    :dataReportInfoYear="dataReportInfoYear"
                ></analyzetable>
            </el-tabs>
        </div>
    </div>
</template>
<script>
// import { getDataReportInfoYear } from '@/api/etcwxApi'
import maintenanceModule from './analyzeModule'
import { searchParamsComputed } from '@/utils'
const computed = searchParamsComputed(
    Object.keys(maintenanceModule.state.postParams),
    'analyzeModule'
)
import chart from '../components/chart.vue'
import analyzepane from './components/analyzePane'
import analyzetable from './components/analyzeTable'
import dayjs from 'dayjs'
import { jumpto } from '@/utils/index'

export default {
    components: {
        chart,
        analyzepane,
        analyzetable,
    },
    data() {
        return {
            vuexModelName: 'analyzeModule',
            statisticsTab: '柱状图',
            // 开始时间
            YearDate: new Date().getFullYear() + '/01/01',
            startdate: new Date(new Date().getTime() - 3600 * 1000 * 24),
            enddate: new Date(new Date().getTime() - 3600 * 1000 * 48),
            startDate: dayjs(new Date().getTime() - 3600 * 1000 * 24)
                .startOf('date')
                .format('YYYY-MM-DD'),
            endDate: dayjs(new Date().getTime() - 3600 * 1000 * 24)
                .startOf('date')
                .format('YYYY-MM-DD'),
            dataReportInfoYear: {
                totalAmount: '',
                totalTaxAmount: '',
                consumeAmount: '',
            },
            showCompareDate: false,
            jumpto,
        }
    },
    computed: {
        ...computed,
        tableHeight() {
            return this.$store.state.element.tableHeight + 62
        },
    },
    created() {
        this.searchBtnClick()
        // this.searchChart()
        // this.getDataReportInfoYear()
        this.staticticsData = {
            type: 'line',
            xAxis: [
                //X轴
                {
                    data: [1, 2, 3, 4, 5, 6],
                },
                //x轴显示两组数据  第2个X轴
                {
                    data: [1, 2, 3, 4, 5, 6],
                },
            ],
            yAxis: [
                {
                    name: 'category1',
                    type: 'bar',
                    data: [1, 2, 3, 4, 5, 5, 6],
                    // ,stack:'1'
                },
                {
                    name: 'category2',
                    type: 'bar',
                    data: [120, 200, 150, 80, 70, 110, 130],
                    // stack:'1'
                },
                {
                    name: 'category3',
                    type: 'line',
                    data: [120, 200, 150, 80, 70, 110, 130],
                    // stack:'1'
                },
            ], //y轴数据
            noCategory: true,
        }
    },
    mounted() {},
    methods: {
        changeCompare() {
            this.showCompareDate = !this.showCompareDates
        },
        searchChart(id) {
            console.log(id, 'id')
            console.log(this.$refs[id], '-----------')
            console.log(this.$store.state.homeModule.postParams)
            // axiosChartData.then(params,(res)=>{
            // this.$refs.[id][0].$refs[id].search(res)
            // })
        },
        changeDateType(e) {
            this.dateType = e
            console.log(this.dateType)
            if (e === 'date') {
                this.startdate = new Date().getTime() - 3600 * 1000 * 24
                this.enddate = new Date().getTime() - 3600 * 1000 * 48
            }
            if (e === 'week') {
                this.startdate = new Date()
                this.enddate = new Date().getTime() - 3600 * 1000 * 24 * 7
            }
            // if (e === 'month') {
            //     this.startdate = new Date()
            //     this.enddate = new Date().getTime() - 3600 * 1000 * 24 * 30
            // }
            this.$refs.ksdate[0].changeDate(this.startdate)
            this.$refs.ksdate[1].changeDate(this.enddate)
        },
        // dateInitData () {

        // },
        searchBtnClick() {
            if (!this.showCompareDate) {
                this.$store.commit(this.vuexModelName + '/updatePostParams', {
                    endRange: {
                        startDate: '0000-00-00',
                        endDate: '0000-00-00',
                    },
                })
            }
            // this.$store.dispatch(`${this.vuexModelName}/getList`);
            this.getDataReportInfoYear()
        },
        // checkTime () {
        //     this.endDate = (new Date(this.YearDate).getFullYear()) + "/12/31"
        //     this.$store.commit(this.vuexModelName + '/updatePostParams', {
        //         startDate: this.startDate,
        //         endDate: this.endDate
        //     })
        //     if (!this.startDate) {
        //         this.$$message('请选择开始时间', 'error')
        //         return;
        //     }

        //     if (!this.endDate) {
        //         this.$$message('请选择结束时间', 'error')
        //         return;
        //     }

        //     this.searchBtnClick()
        // },
        async getDataReportInfoYear() {
            // let params = {
            //     startDate:this.startDate?new Date(this.startDate+" 00:00:00").getTime():"",
            //     endDate:this.endDate?new Date(this.endDate+" 23:59:59").getTime():""
            // }
            try {
                // let { data } = await getDataReportInfoYear(params)
                let data = { year: [{ name: '11' }] }
                this.dataReportInfoYear = Object.assign(
                    {},
                    this.dataReportInfoYear,
                    data.year
                )
            } catch (err) {
                this.$$message(err, 'error')
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.statistics {
    background: transparent;
    .headerBar {
        height: 52px;
        line-height: 52px;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #181818;
        border-bottom: 1px solid #eee;
        background: #fff;
        span {
            margin-left: 20px;
        }
    }
}
</style>